<script setup>
import { routesChildren } from "@/router/index.js";
import { useRouter } from "vue-router";
const { push } = useRouter();
</script>

<template>
  <div class="home-index">
    <div class="header">
      <el-button
        class="h-item"
        @click="push(item.path)"
        v-for="item in routesChildren"
        size="large"
        :key="item.name"
        type="primary"
      >
        {{ item.name }}
      </el-button>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-index {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content {
    width: 100%;
    height: calc(100% - 60px);
    background: url("@/assets/mm-1.jpg") no-repeat;
    background-size: cover;
    overflow: scroll;
    padding: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
